<!--<div class="card flex justify-center">
  <p-button label="Check" />
</div>-->

<p-button label="Toggle Dark Mode" (onClick)="toggleDarkMode()"/>

<br>

<input type="text" pInputText placeholder="Overriden" class="tw-p-8" />

<div>
  <p class="tw-text-red-500">你老妹</p>
</div>


<div class="card flex justify-center">
  <p-button (click)="showDialog()" label="Show" />
  <p-dialog header="Edit Profile" [modal]="true" [(visible)]="visible" [style]="{ width: '25rem' }">
      <span class="p-text-secondary block mb-8">Update your information.</span>
      <div class="flex items-center gap-4 mb-4">
          <label for="username" class="font-semibold w-24">Username</label>
          <input pInputText id="username" class="flex-auto" autocomplete="off" />
      </div>
      <div class="flex items-center gap-4 mb-8">
          <label for="email" class="font-semibold w-24">Email</label>
          <input pInputText id="email" class="flex-auto" autocomplete="off" />
      </div>
      <div class="flex justify-end gap-2">
          <p-button label="Cancel" severity="secondary" (click)="visible = false" />
          <p-button label="Save" (click)="visible = false" />
      </div>
  </p-dialog>
</div>
